"use client"

import { useState } from "react"
import { Search, TrendingUp, Users, Hash } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserCard } from "@/components/user-card"
import { PostCard } from "@/components/post-card"
import { BottomNavigation } from "@/components/bottom-navigation"
import { mockUsers, mockPosts } from "@/lib/mock-data"

const trendingTopics = [
  { tag: "photography", posts: 1234 },
  { tag: "design", posts: 987 },
  { tag: "fitness", posts: 756 },
  { tag: "travel", posts: 543 },
  { tag: "food", posts: 432 },
]

const suggestedUsers = mockUsers.slice(0, 3)
const trendingPosts = mockPosts.slice(0, 2)

export default function DiscoverPage() {
  const [searchQuery, setSearchQuery] = useState("")

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-md mx-auto px-4 py-3">
          <h1 className="text-xl font-bold text-gray-900 mb-3">Discover</h1>

          {/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search users, posts, or hashtags..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>
      </div>

      <div className="max-w-md mx-auto px-4 py-4">
        <Tabs defaultValue="trending" className="w-full">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="trending">Trending</TabsTrigger>
            <TabsTrigger value="users">Users</TabsTrigger>
            <TabsTrigger value="posts">Posts</TabsTrigger>
          </TabsList>

          <TabsContent value="trending" className="space-y-4 mt-4">
            {/* Trending Topics */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <TrendingUp size={20} />
                  <span>Trending Topics</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {trendingTopics.map((topic) => (
                  <div key={topic.tag} className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <Hash size={16} className="text-gray-400" />
                      <span className="font-medium">#{topic.tag}</span>
                    </div>
                    <span className="text-sm text-gray-500">{topic.posts.toLocaleString()} posts</span>
                  </div>
                ))}
              </CardContent>
            </Card>

            {/* Trending Posts */}
            <Card>
              <CardHeader>
                <CardTitle>Trending Posts</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                {trendingPosts.map((post) => (
                  <div key={post.id} className="border-b border-gray-100 last:border-b-0">
                    <PostCard post={post} />
                  </div>
                ))}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="users" className="space-y-4 mt-4">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Users size={20} />
                  <span>Suggested Users</span>
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                {suggestedUsers.map((user) => (
                  <UserCard key={user.id} user={user} />
                ))}
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="posts" className="space-y-4 mt-4">
            {mockPosts.map((post) => (
              <PostCard key={post.id} post={post} />
            ))}
          </TabsContent>
        </Tabs>
      </div>

      <BottomNavigation />
    </div>
  )
}
